---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import BlogPostPreview from '../components/BlogPostPreview.astro';

let title = 'Example Blog';
let description = 'The perfect starter for your perfect blog.';

// Use Astro.glob to fetch all post with associated frontmatter
const unsortedPosts = await Astro.glob('./posts/*.md');
const posts = unsortedPosts.sort(function (a, b) {
	return (
		new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
	);
});
---

<html lang="en">
	<head>
		<BaseHead title={title} description={description} />
	</head>

	<body>
		<Header />
		<div class="wrapper">
			<main class="content">
				<section class="intro">
					<h1>{title}</h1>
					<p>{description}</p>
				</section>
				<section aria-label="Blog post list">
					{posts.map(({ url, frontmatter }) => (
						<BlogPostPreview
							title={frontmatter.title}
							description={frontmatter.description}
							publishDate={frontmatter.publishDate}
							url={url}
						/>
					))}
				</section>
			</main>
		</div>
	</body>
</html>

<style>
	.content {
		margin-top: 4rem;
		margin-bottom: 8rem;
	}

	.intro {
		padding-bottom: 4rem;
		margin-bottom: 2rem;
		border-bottom: 4px solid var(--theme-divider);
	}

	h1 {
		font-size: 2.5rem;
		font-weight: 700;
	}
</style>
